<template>
  <div class="distributor_details">
    <el-container class="base_details_container">
      <BackTitleView title="分销员详情" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">基本信息</div>
            <div class="base_details_content_second">
              <MemberInfo :type="config.type"></MemberInfo>
            </div>
            <div class="base_details_title_button">
              <div class="tb_title">分销记录</div>
              <el-button type="primary" text @click="getExport">导出</el-button>
            </div>
            <div class="base_details_content_second">
              <StatusBar :data="statusList" default="all" />
              <DataCollectTable :data="data" :total="total" :config="tableConfig">
              </DataCollectTable>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import BackTitleView from "@com/BackTitleView.vue";
import StatusBar from "@com/StatusBar.vue";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import $ from "@util/base"
import useRoute from "@util/router";
import api from "@api/member";

const config = {
  type: "distributordetails",
};

const route = useRoute();

route.watchRouter("distributordetails", () => {
  getData();
});

const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "进行中",
    value: 1,
    total: 0,
  },
  {
    label: "已完成",
    value: 2,
    total: 0,
  },
]);

const data = ref([]);
const total = ref(0);

// function operations(data) {
//   if (data.mainBusiType !== "1017004") {
//     return [OPERATIONS.check];
//   }
// }

const tableConfig = {
  showIndex: true,
  // operations: {
  //   label: "操作",
  //   width: 80,
  //   operations: operations,
  // },
  operations: null,
  column: [
    {
      label: "产品名称",
      prop: "productName",
      width: 120,
    },
    {
      label: "订单编号",
      prop: "orderCode",
      width: 120,
    },
    {
      label: "订单类型",
      prop: "orderType",
      width: 100,
    },
    {
      label: "礼包码编号",
      prop: "exchangeItemCode",
      width: 120,
    },
    {
      label: "下单时间",
      prop: "orderCreateTime",
      width: 100,
    },
    {
      label: "订单状态",
      prop: "orderStatus",
      width: 100,
    },
    {
      label: "商品数量",
      prop: "sellNum",
      width: 90,
    },
    {
      label: "归属基地",
      prop: "shopName",
    },
    {
      label: "分销员",
      prop: "agentMemberName",
      width: 90,
    },
    {
      label: "收货人",
      prop: "recipientName",
      width: 90,
    },
    {
      label: "联系方式",
      prop: "phoneNumber",
      width: 120,
    },
    {
      label: "发货人",
      prop: "updateExpressUser",
      width: 90,
    },
    {
      label: "发货时间",
      prop: "updateExpressTime",
      width: 100,
    },
    {
      label: "核销人",
      prop: "verifierName",
      width: 90,
    },
    {
      label: "核销时间",
      prop: "verificateTime",
      width: 100,
    },
  ],
};

// const opHander = operationsHander();

// opHander.install(OP_KEY.check, (data) => {
//   // 1017001商品1017002旅行1017003酒店
//   switch (data.mainBusiType) {
//     case "1017001":
//       route.push({
//         name: "goodsorderdetails",
//         query: { code: data.orderCode, type: 'show' },
//       });
//       break;
//     case "1017002":
//       route.push({
//         name: "travelorderdetails",
//         query: { code: data.orderCode, type: 'show' },
//       });
//       break;
//     case "1017003":
//       route.push({
//         name: "hotelorderdetails",
//         query: { code: data.orderCode, type: 'show' },
//       });
//       break;
//   }
// });

getData();
function getData() {
  getNum();
  getList();
}

function getNum() {
  api.orderNum(route.query().code, val => {
    statusData(val)
  })
}

function statusData(val) {
  statusList.forEach((e, i) => { e.total = val[i] })
}

function getList() {
  let routeQuery = route.query();
  api.order(
    {
      status: routeQuery.status,
      memberCode: routeQuery.code,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      total.value = val.total;
      data.value = val.list.map(e => {
        switch (e.mainBusiType) {
          case "1017001":
            e.orderType = "商品"
            break;
          case "1017002":
            e.orderType = "旅游"
            break;
          case "1017003":
            e.orderType = "酒店"
            break;
          case "1017004":
            e.orderType = "礼包"
            break;
        }
        return e
      })
    }
  );
}

function getExport() {
  let routeQuery = route.query()
  api.orderExport({
    status: routeQuery.status,
    memberCode: routeQuery.code,
  }, val => {
    $.download(val.url, "会员列表导出")
  })
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.distributor_details {
  height: 100%;

  .status_bar {
    margin-bottom: 10px;
  }
}
</style>
